<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>highlight.js test</title>
</head>
<body>
<div id="explicit-language">

<!-- explicit language (code) -->
<pre><code class="python">for x in [1, 2, 3]:
  count(x)</code></pre>

<!-- explicit language (pre) -->
<pre class="python"><code>for x in [1, 2, 3]:
  count(x)</code></pre>

<!-- html 5 style language class -->
<pre><code class="language-python">for x in [1, 2, 3]:
  count(x)</code></pre>

<!-- shortened language prefix -->
<pre><code class="lang-scss">@import "compass/reset";
$colorGreenDark: darken($colorGreen, 10);</code></pre>

<!-- uppercase symbols -->
<pre><code class="SCSS">@import "compass/reset";
$colorGreenDark: darken($colorGreen, 10);</code></pre>

</div>

<div id="custom-markup">

<!-- tab replacement -->
<pre><code class="python">for x in [1, 2, 3]:
	count(x)</code></pre>

<!-- custom markup -->
<pre><code class="html">&lt;<a href="http://dev.w3.org/html5/spec/Overview.html#the-div-element">div</a> id="contents"&gt;
  <del>&lt;p&gt;Hello, World!</del><!-- A comment should not break merging --><ins>Goodbye, cruel world!</ins>
&lt;/div&gt;</code></pre>

<!-- custom markup and tab replacement -->
<pre><code class="python">for x in [1, 2, 3]:
<span style="background:yellow">	</span>count(x)
	if x == 3:
	<span style="background:yellow">	</span>count(x + 1)</code></pre>

<!-- <br> inside of <pre>s -->
<pre><code class="language-javascript">&gt;&gt; '\x41\x42\x43'<br>'ABC'<br><hr><br>&gt;&gt; '\x61\x62\x63'<br>'abc'
</code></pre>

</div>

<div id="language-alias">

<!-- language alias -->
<pre><code class="language-js">var x = '&lt;p&gt;this should &lt;b&gt;not&lt;/b&gt; be highlighted as &lt;em&gt;HTML&lt;/em&gt;';</code></pre>

</div>

<div id="no-highlight">

<!-- disable highlighting -->
<pre><code class="nohighlight">&lt;div id="contents"&gt;
  &lt;p&gt;Hello, World!
&lt;/div&gt;</code></pre>
<pre><code class="no-highlight">&lt;div id="contents"&gt;
  &lt;p&gt;Hello, World!
&lt;/div&gt;</code></pre>
<pre><code class="plain">&lt;div id="contents"&gt;
  &lt;p&gt;Hello, World!
&lt;/div&gt;</code></pre>
<pre><code class="text">&lt;div id="contents"&gt;
  &lt;p&gt;Hello, World!
&lt;/div&gt;</code></pre>

<!-- non-code <pre> -->
<pre><samp>Computer output</samp></pre>

<!-- unsupported language-prefixed class -->
<pre><code class="language-foo">for x in [1, 2, 3]: count(x)</code></pre>

<!-- unsupported shortened language-prefixed class -->
<pre><code class="lang-foo">for x in [1, 2, 3]: count(x)</code></pre>

<!-- unsupported prefixed language and supported unprefixed language -->
<pre><code class="python language-foo">for x in [1, 2, 3]: count(x)</code></pre>

<!-- class name with no highlighting keyword (eg: 'plain' or 'text') -->
<pre><code class="text-content javascript">var x = 'foo';</code></pre>
<pre><code class="clipboard-text javascript">var x = 'foo';</code></pre>

</div>

<!-- sub-languages -->
<pre><code id="sublanguages" class="xml">&lt;? echo 'php'; /* ?&gt;
&lt;body&gt;
&lt;script&gt;function tf (x) { return typeof x; }&lt;/script&gt;
&lt;/body&gt;
&lt;? end of comment */ ?&gt;
</code></pre>

<div id="build-classname">

<!-- add class name -->
<pre><code class=" some-class ">&lt;?xml version="1.0"?&gt;
    &lt;response value="ok" xml:lang="en"&gt;&lt;/response&gt;</code></pre>

<!-- do not clutter class name first -->
<pre><code class="hljs some-class ">&lt;?xml version="1.0"?&gt;
    &lt;response value="ok" xml:lang="en"&gt;&lt;/response&gt;</code></pre>

<!-- do not clutter class name last -->
<pre><code class=" some-class hljs">&lt;?xml version="1.0"?&gt;
    &lt;response value="ok" xml:lang="en"&gt;&lt;/response&gt;</code></pre>

<!-- do not clutter class name spaces around-->
<pre><code class=" hljs some-class ">&lt;?xml version="1.0"?&gt;
    &lt;response value="ok" xml:lang="en"&gt;&lt;/response&gt;</code></pre>

</div>

<div id="use-br">

<div class="code xml">&lt;head&gt;<br>  &lt;meta charset="utf-8"&gt;<br>  &lt;title&gt;&lt;/title&gt;<br>&lt;/head&gt;</div>

<div class="code xml">&lt;head&gt;<br>
  &lt;meta charset="utf-8"&gt;<br>
  &lt;title&gt;&lt;/title&gt;<br>
&lt;/head&gt;</div>

<div class="code xml">&lt;head&gt;<br>
  &lt;meta charset="utf-8"&gt;<br/>
  &lt;title&gt;&lt;/title&gt;<br />
&lt;/head&gt;</div>

</div>
</body>
</html>
